Adds Mermaid-based graph visualization to visualize module dependencies and chunk composition during bundling.

Implementation

Graph extraction via plugin

const moduleGraphPlugin = {
  name: 'collect-module-graph',
  buildEnd() {
    const moduleIds = this.getModuleIds()
    for (const id of moduleIds) {
      const info = this.getModuleInfo(id)
      moduleInfoMap.set(id, {
        importedIds: info.importedIds,
        dynamicallyImportedIds: info.dynamicallyImportedIds,
        importers: info.importers,
        dynamicImporters: info.dynamicImporters,
        isEntry: info.isEntry,
      })
    }
  }
}

Components

• GraphContainer.vue - Renders Mermaid flowcharts with Module/Chunk tabs
• OutputView.vue - Adds Output/Graph tab switcher
• graph-mermaid.ts - Generates Mermaid syntax from graph data

Mermaid integration

• Dynamic import from npm (mermaid@11.12.2) for code splitting
• Modern node syntax: note@{ shape: notch-rect, label: "..." }
• Line breaks via <br/> tags

Visualization features

• Module graph: Shows import relationships with solid arrows (static) and dashed arrows (dynamic)
• Chunk graph: Shows composition with module counts
• Color coding: Entry modules/chunks (green), dynamic entries (orange)

Dependencies

• Added langium@3.3.1 to trustPolicyExclude in pnpm-workspace.yaml

Screenshots

Module Graph:

Chunk Graph:

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.